<template>
  <view class="box">
    <!-- 打赏页 -->
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifdef APP-PLUS -->
      打赏
      <!-- #endif -->
      <!-- #ifndef APP-PLUS -->
      <text @click="fanhui">打赏</text>
      <!-- #endif -->
    </view>
    <view class="personX">
      <image class="image" v-if="image" :src="image" mode=""></image>
      <image
        class="image"
        v-else
        src="https://pic.bangbangtongcheng.com/static/my/header.png"
        mode=""
      ></image>
      <span>{{ name || "未命名用户" }}</span>
    </view>
    <view class="center">
      <span class="left_span">选择打赏金额</span>
      <view class="right_ye">
        余额：
        <span class="sapn">{{ balance.bangBangDouBalance }}帮帮豆</span>
      </view>
    </view>
    <view class="quantity">
      <view
        :class="i.active ? 'item active' : 'item'"
        @click="quantityChage(i)"
        v-for="(i, j) in quantityData"
        :key="j"
      >
        {{ i.quantity }}帮帮豆
      </view>
    </view>
    <view class="enterQuantity">
      <input
        v-model="quantity"
        class="input"
        placeholder="输入打赏帮帮豆数量"
        type="number"
        @input="changeInput"
      />
    </view>
    <view class="enterQuantity" style="margin-top: 40rpx">
      <view class="" style="margin-bottom: 20rpx"> 留言: </view>
      <input
        v-model="leaveAMessage"
        class="input"
        style="color: #333"
        placeholder="说点什么吧"
        type="text"
      />
    </view>
    <view
      :class="quantity > balance.bangBangDouBalance ? 'define define_active' : 'define'"
      @click="determine()"
    >
      确定
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif
export default {
  data() {
    return {
      statusBarHeight,
      userInfo: uni.getStorageSync("Pduser"),
      imgUrl: this.$imgSrc,
      quantityData: [],
      quantity: "",
      userId: "",
      name: "",
      image: "",
      balance: "",
      leaveAMessage: "",
      anti_shake: false,
    };
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onLoad(option) {
    this.userId = option.userId;
    this.name = option.name;
    this.image = option.image;
    this.getBangbangDou();
    this.getUserDou();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  methods: {
    //获取帮帮豆打赏配置
    getBangbangDou() {
      this.$myRequest.get("/api/mobile/public/getBangbangdouReward").then((res) => {
        res.bangbangdouReward.pageList.forEach((v) => {
          v.active = false;
        });
        this.quantityData = res.bangbangdouReward.pageList;
      });
    },
    // 获取本人帮帮豆
    getUserDou() {
      this.$myRequest
        .get("/api/mobile/public/getHelpfulBeanBalanceByUserId", {
          userId: this.userInfo.id,
        })
        .then((res) => {
          this.balance = res.userInformation;
        });
    },
    changeInput() {
      this.quantityData.forEach((v) => (v.active = v.quantity == this.quantity));
    },
    determine() {
      if (this.userInfo.id == this.userId) {
        uni.showToast({
          title: "该帮友圈是您发布的，无法打赏！",
          icon: "none",
          mask: true,
        });
        return false;
      }
      if (this.anti_shake) {
        return false;
      }
      if (this.quantity > this.balance.bangBangDouBalance) {
        return;
      }
      if (this.quantity == "") {
        uni.showToast({
          title: "打赏帮帮豆不能为空",
          icon: "none",
          mask: true,
        });
        return false;
      }
      this.anti_shake = true;
      this.$myRequest
        .post("/api/mobile/public/rewardBangbangdou", {
          rewarder: this.userInfo.id,
          rewardee: this.userId,
          rewardQuantity: this.quantity,
          leaveMessage: this.leaveAMessage,
        })
        .then((res) => {
          uni.showToast({
            title: res.msg,
            icon: "none",
            mask: true,
          });
          setTimeout(() => {
            this.anti_shake = false;
          }, 500);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 500);
        });
    },
    quantityChage(item) {
      let arr = this.quantityData;
      arr.forEach((v) => {
        v.active = false;
        if (v.id == item.id) {
          v.active = true;
          this.quantity = v.quantity;
        }
      });
      this.quantityData = arr;
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.tou {
  position: relative;
  width: 100%;
  text-align: center;
  /* #ifdef MP-WEIXIN */
  justify-content: center;
  display: flex;
  align-items: center;
  /* #endif */
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    left: 30rpx;
  }
  .image2 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    right: 30rpx;
  }
  .p2 {
    position: absolute;
    bottom: 0rpx !important;
    right: 30rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    bottom: 16rpx !important;
    /* #endif */
  }
}
.personX {
  height: 300rpx;
  background-color: #64b6a8;
  border-radius: 0 0 110rpx 110rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  font-weight: 500;
  color: #ffffff;
  margin-top: -2rpx;
  .image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 160rpx;
    margin-bottom: 20rpx;
  }
}
.center {
  padding: 0 70rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 38rpx;
  margin-bottom: 42rpx;
  .left_span {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }
  .right_ye {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    .sapn {
      font-size: 28rpx;
      font-weight: 400;
      color: #64b6a8;
    }
  }
}
.quantity {
  padding: 0 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 188rpx;
    height: 74rpx;
    border-radius: 38rpx;
    border: 1px solid #64b6a8;
    font-size: 24rpx;
    font-weight: 300;
    color: #64b6a8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
  }
  .active {
    background-color: #64b6a8;
    color: #fff;
  }
}
.enterQuantity {
  padding: 0 70rpx;
  .input {
    height: 68rpx;
    border-radius: 8rpx;
    border: 1px solid #c4c4c4;
    font-size: 28rpx;
    font-weight: 300;
    color: #c4c4c4;
    padding: 10rpx;
  }
}
.define {
  position: fixed;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 670rpx;
  height: 80rpx;
  background-color: #64b6a8;
  border-radius: 50rpx;
  font-size: 34rpx;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.define_active {
  background-color: rgb(153, 153, 153);
}
</style>
